<template>
    <div>
        <div class="square">
            <div class="title">排列方式</div>
            <div class="content">
                <el-radio-group v-model="form.data.tabs">
                    <el-radio-button label="1">一行四个</el-radio-button>
                    <el-radio-button label="2">一行五个</el-radio-button>
                </el-radio-group>
            </div>
        </div>
        <div class="square">
            <div class="title">模块间隙</div>
            <div class="content">
                <el-slider v-model="form.data.space" :step="1" :max="20"> </el-slider
                ><el-input
                    style="width: 58px; margin-left: 8px"
                    v-model="form.data.space"
                    @change="changeSpace"
                    type="number"
                    onkeyup="value=value.replace(/[^\d]/g,'')"></el-input
                ><span style="margin-left: 8px">像素</span>
            </div>
        </div>
        <div class="square">
            <div class="title">分类导航</div>
            <div class="tips">最多添加10个导航，支持调整导航顺序。</div>
            <div class="content">
                <div class="addContent">
                    <draggable :list="form.data.imgList" handle=".head">
                        <template #item="{ index }">
                            <div class="item">
                                <div class="head">
                                    <span>导航{{ index + 1 }}</span>
                                    <div>
                                        <img
                                            class="img-square"
                                            src="@/assets/imgs/mall/decorate/top.png"
                                            v-show="index && form.data.imgList.length > 1"
                                            @click="onTop(index)" />
                                        <img
                                            class="img-square"
                                            src="@/assets/imgs/mall/decorate/bottom.png"
                                            v-show="
                                                index != form.data.imgList.length - 1 && form.data.imgList.length > 1
                                            "
                                            @click="onBottom(index)" />

                                        <img
                                            class="img-square"
                                            src="@/assets/imgs/mall/decorate/del.png"
                                            v-show="index"
                                            @click="del(index)" />
                                    </div>
                                </div>
                                <div class="content">
                                    <el-form
                                        :model="form.data.imgList[index]"
                                        label-width="auto"
                                        :rules="innerrule"
                                        ref="ruleFormRef">
                                        <el-form-item label="导航名称" prop="name">
                                            <el-input
                                                v-model="form.data.imgList[index].name"
                                                maxlength="5"
                                                show-word-limit></el-input
                                        ></el-form-item>
                                        <MutualChoose
                                            :typeList="typeList"
                                            :category="categoryList"
                                            @sendParam="getParamList($event, index)"
                                            :row="form.data.imgList[index]" />
                                        <el-form-item label="上传图片" prop="imgurl"
                                            ><ImgUpload
                                                :limit="0"
                                                @imgStateChange="imgChangeHandler($event, 'imgurl', index)"
                                                :currentImg="form.data.imgList[index].imgurl" />
                                        </el-form-item>
                                    </el-form>
                                </div>
                            </div>
                        </template>
                    </draggable>
                </div>
            </div>
        </div>
        <div class="tips">
            <span>{{ form.data.imgList.length }}</span
            >/10
        </div>
        <el-tooltip placement="top" v-if="form.data.imgList.length >= 10">
            <template #content> 最多添加10个分类导航。 </template>
            <el-button class="btn" @click="add">
                <el-icon class="el-icon--left"><Plus /></el-icon>添加导航
            </el-button>
        </el-tooltip>
        <el-button class="btn" @click="add" v-if="form.data.imgList.length < 10">
            <el-icon class="el-icon--left"><Plus /></el-icon>添加导航
        </el-button>
    </div>
</template>
<script setup>
import { ref, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus';
import draggable from 'vuedraggable';
import request from '@/request';
import storage from '@/commons/storage';
import MutualChoose from '@/components/MutualChoose.vue';
import ImgUpload from '@/components/ImgUpload.vue';
const props = defineProps(['tabparam', 'comIndex', 'components']);
const emit = defineEmits(['changeSetting']);
const ruleFormRef = ref();
let form = reactive({ data: { space: '', imgList: [], tabs: '1' } });
const typeList = ref([]);
const categoryList = ref([]);
let allitem = ref([]);
const getTypeList = () => {
    request('templateMutual', { channel: 'navigation' }).then(res => {
        Object.assign(typeList.value, res.data);
    });
};
//分类分组数据
const getCategoryList = async () => {
    let cate = await request('queryCategoryListServ', { shopId: storage.get('ZW-SHOPID') });
    Object.assign(categoryList.value, cate?.data?.list || []);
};
getCategoryList();
getTypeList();
const getParamList = (param, index) => {
    Object.assign(form.data.imgList[index], param);
};
const innerrule = reactive({
    imgurl: [{ required: true, message: '上传图片不能为空' }]
});

const add = () => {
    if (form.data.imgList.length == 10) {
        ElMessage.warning('最多可添加10张广告图！');
        return;
    }
    let nevigate = { name: '', mutual: '', page: '选择页面', imgurl: '', id: '', chooseName: '', url: '', openimg: '' };
    form.data.imgList.push(nevigate);
};
const del = index => {
    form.data.imgList.splice(index, 1);
};
const imgChangeHandler = ({ imgUrl, msg }, prop, num) => {
    form.data.imgList[num][prop] = imgUrl || '';
    if (msg) {
        ElMessage.warning(msg);
    }
};
const changeSpace = () => {
    form.data.space = Number(form.data.space);
};
const onTop = index => {
    form.data.imgList.splice(index - 1, 0, form.data.imgList.splice(index, 1)[0]);
};
const onBottom = index => {
    form.data.imgList.splice(index + 1, 0, form.data.imgList.splice(index, 1)[0]);
};
watch(
    () => form.data,
    val => {
        emit('changeSetting', {
            ...form.data,
            name: 'category',
            index: props.comIndex ? props.comIndex : 0
        });
    },
    {
        deep: true
    }
);
watch(
    () => props.comIndex,
    val => {
        allitem.value = JSON.parse(JSON.stringify(props.components));
        if (allitem.value.length) {
            form.data = Object.keys(allitem.value[val].options).length
                ? allitem.value[val].options
                : {
                      space: 0,
                      tabs: '1',
                      imgList: [
                          {
                              name: '',
                              mutual: '',
                              page: '选择页面',
                              imgurl: '',
                              id: '',
                              chooseName: '',
                              url: '',
                              openimg: ''
                          }
                      ]
                  };
        } else {
            form.data = {
                tabs: '1',
                space: 0,
                imgList: [
                    { name: '', mutual: '', page: '选择页面', imgurl: '', id: '', chooseName: '', url: '', openimg: '' }
                ]
            };
        }
    },
    { immediate: true }
);
watch(
    () => props.components,
    val => {
        if (val.length && Object.keys(val[props.comIndex].options).length) {
            form.data = val[props.comIndex].options;
        } else {
            form.data = {
                space: 0,
                imgList: [
                    { name: '', mutual: '', page: '选择页面', imgurl: '', id: '', chooseName: '', url: '', openimg: '' }
                ],
                tabs: '1'
            };
        }
    },
    { immediate: true, deep: true }
);
</script>
<style lang="scss" scoped>
:deep(.el-slider) {
    width: 200px;
}
.square {
    border-bottom: 1px solid rgba(234, 234, 234, 1);

    .title {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #33302d;
        line-height: 14px;
        margin-bottom: 8px;
        margin-top: 24px;
    }
    .title::before {
        content: '*';
        color: #f56c6c;
        margin-right: 4px;
    }
    .content {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 24px;
        .addContent {
            .img-square {
                width: 16px;
                margin-right: 6px;
                cursor: pointer;
            }
            .item {
                border-radius: 4px;
                border: 1px solid #eaeaea;
                margin-bottom: 16px;
                .head {
                    padding: 18px 24px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 14px;
                    font-weight: 500;
                    color: #33302d;
                    line-height: 20px;
                    border-bottom: 1px solid #eaeaea;
                }
                .content {
                    padding: 32px 24px;
                    :deep(.one_line > span) {
                        display: block;
                        max-width: 180px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                }
            }
        }
    }
}

.btn {
    width: 100%;
    border-radius: 4px;
    border: 1px solid #ff6b00;
    height: 36px;
    text-align: center;
    font-size: 14px;
    font-weight: 300;
    color: #ff6b00;
    line-height: 36px;
}
.tips {
    margin: 15px 0 24px 0;
    font-size: 12px;
    font-weight: 400;
    color: #969696;
    line-height: 17px;
    span {
        color: #33302d;
    }
}
</style>
